<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数防抖与函数节流</title>
</head>
<body style="height: 1200px;">

</body>
</html>

<script>
  /*
  * 为什么用到函数防抖和节流？？
  * 一些事件的触发或者一些用户的操作可能是高频率的，输入框改变，鼠标位置改变，滚动等频繁调用后台接口的话会对系统造成压力甚至崩溃。
  * 这个时候就需要防抖和节流
  *
  * 一、函数节流
  * 一个函数执行完之后，超过设定的周期之后才会再次执行。（一定时间内只允许执行一次）
  *
  * 应用场景：
  * DOM 元素的拖拽功能实现（mousemove）
  * 搜索联想（keyup）
  * 计算鼠标移动的距离（mousemove）
  * 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
  * 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
  *
  * 二、函数防抖
  * 一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
  * 应用场景：
  * 每次 resize/scroll 触发统计事件
  * 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
  *
  *
  * 函数节流 和 函数防抖 的核心就是限制某一个方法频繁触发，巧妙运用 setTimeout 来存放待执行的函数，这样可以很方便的利用  clearTimeout 在合适的时机来清除待执行的函数。
  * 使用 函数节流 和 函数防抖 的目的，是为了节约计算机资源。
  * */

  // 函数节流
  // function scroll (f, delay) {
  //   let lastTime = 0
  //   return () => {
  //     // console.log('this:', this)
  //     const curTime = new Date()
  //     if (curTime - lastTime > delay) {
  //       f()
  //       lastTime = curTime
  //     }
  //   }
  // }

  // 函数防抖
  function scroll (f, delay) {
    let t = null
    return function () {
      clearTimeout(t)
      t = setTimeout(() => {
        f.call(this)
      }, delay)
    }
  }
  document.onclick = scroll(() => {console.log('11:', 11)}, 1000)

</script>